<div class="recharge-form-warper">
  <form nz-form nzLayout="vertical">
    <nz-form-item>
      <nz-form-label class="form-code">
        <label>充值金额</label>
      </nz-form-label>
    </nz-form-item>
    <nz-form-item>
      <!-- <nz-input-number formControlName="amount" name="amount"></nz-input-number> -->

      <nz-input-group [nzSuffix]="suffixIconSearch">
        <input type="text" #inputElement nzSize="large" name="amount" [ngModel]="amount" nz-input class="code-input" (ngModelChange)="onChange($event)" (blur)="onBlur()" />
      </nz-input-group>
      <ng-template #suffixIconSearch>
        人民币
      </ng-template>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label class="form-code">
        <label>关联码</label>
      </nz-form-label>
    </nz-form-item>
    <nz-form-item>
      <!-- <nz-input-number formControlName="amount" name="amount"></nz-input-number> -->
      <input type="text" nzSize="large" name="verifyCode" [ngModel]="verifyCode" nz-input readonly="readonly" class="code-input"  />
    </nz-form-item>
    <nz-form-item>
      <nz-form-label class="form-bank">
        <label>收款账户信息<a class="select-other fr" (click)="showBanks()">选择其他账号</a></label>
        <div class="form-bank-text">
          <p>账号：{{ activeBank.bankAccountNum }}</p>
          <p>户主：{{ activeBank.bankAccountName }}</p>
          <p>银行：{{ activeBank.bankName }}</p>
          <p>支行：{{ activeBank.bankSubBranch }}</p>
        </div>
      </nz-form-label>
    </nz-form-item>
    <nz-form-item class="recharge-btn-box">
      <button nz-button class="submit" nzType="primary" type="button" (click)="onSubmit()">提交充值订单</button>
    </nz-form-item>
  </form>
</div>

<nz-modal nzWidth="466px" class="banks-modal" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="null" [nzClosable]="false" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    <h4>选择收款银行</h4>
  </ng-template>

  <ng-template #modalContent>
    <ul class="bank-info-list">
      <li class="form-bank-text" *ngFor="let item of banks" [ngClass]="{ active: item.bankAccountNum == tempBank.bankAccountNum }" (click)="selectBank(item)">
        <p>账号：{{ item.bankAccountNum }}</p>
        <p>户主：{{ item.bankAccountName }}</p>
        <p>银行：{{ item.bankName }}</p>
        <p>支行：{{ activeBank.bankSubBranch }}</p>
      </li>
    </ul>
    <div class="from-footer">
      <button nz-button nzType="primary" (click)="handleOk()">确认</button>
      <button nz-button nzType="default" (click)="handleCancel()">取消</button>
    </div>
  </ng-template>
</nz-modal>
